<template>
    <div id="app">
        <el-container >
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu
                        :default-active="'/index'"
                         router
                        @open="handleOpen"
                        @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>文章统计</template>
                        <el-menu-item-group>
                            <template slot="title">频道分析</template>
                            <el-menu-item index="1-1">频道阅读数分析</el-menu-item>
                            <el-menu-item index="1-2">频道阅读时长分析</el-menu-item>
                            <el-menu-item index="1-3">频道投放数分析</el-menu-item>
                        </el-menu-item-group>



                        <el-menu-item-group title="文章投放分析">
                            <el-menu-item index="1-4">投放分类分析</el-menu-item>
                        </el-menu-item-group>

                        <el-menu-item-group title="文章分词分析">
                            <el-menu-item index="1-5">文章分词分析</el-menu-item>
                        </el-menu-item-group>
<!--                        <el-submenu index="1-5">-->
<!--                            <template slot="title">投放时间分析</template>-->
<!--                            <el-menu-item index="1-5-1">每日时间段</el-menu-item>-->
<!--                            <el-menu-item index="1-5-2">每周时间段</el-menu-item>-->
<!--                            <el-menu-item index="1-5-3">每月时间段</el-menu-item>-->

<!--                        </el-submenu>-->

<!--                        <el-menu-item-group>-->
<!--                            <template slot="title">文章分类分析</template>-->
<!--                            <el-menu-item index="1-6">分类阅读数分析</el-menu-item>-->
<!--                            <el-menu-item index="1-7">分类点赞数分析</el-menu-item>-->
<!--                            <el-menu-item index="1-8">分类评论数分析</el-menu-item>-->
<!--                        </el-menu-item-group>-->
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>博主分析</template>
                        <el-menu-item-group>
                            <template slot="title">喜爱度分析</template>
                            <el-menu-item index="2-1">粉丝数分析</el-menu-item>
                            <el-menu-item index="2-2">点赞度分析</el-menu-item>
                            <el-menu-item index="2-3">被阅读数分析</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="投放分析">
                            <el-menu-item index="2-4">投放数分析</el-menu-item>
                        </el-menu-item-group>
<!--                        <el-menu-item-group title="投放分析">-->
<!--                            <el-menu-item index="2-4">投放类别分析</el-menu-item>-->
<!--                        </el-menu-item-group>-->
<!--                        <el-submenu index="2-5">-->
<!--                            <template slot="title">投放时间段分析</template>-->
<!--                            <el-menu-item index="2-5-1">每日时间段</el-menu-item>-->
<!--                            <el-menu-item index="2-5-2">每周时间段</el-menu-item>-->
<!--                            <el-menu-item index="2-5-3">每月时间段</el-menu-item>-->
<!--                        </el-submenu>-->
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>数据统计</template>
                        <el-menu-item-group>
                            <template slot="title">总数统计（每年）</template>
                            <el-menu-item index="3-1">用户平均阅读篇数</el-menu-item>
                            <el-menu-item index="3-2">博主平均发布数</el-menu-item>
                            <el-menu-item index="3-3">用户平均阅读时长</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: center; font-size: 30px">
                 <i class="el-icon-setting" style="margin-right: 30px"><span>博客大数据分析系统</span></i>


                </el-header>

                <el-main>
                    <router-view> </router-view>
                </el-main>


            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'NavMenu',
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>